<template>
  <div id="index" style="margin-top: -10%">
    <van-nav-bar
        title="书城"
        left-text="返回"
        left-arrow
        @click-right="onClickRight"
    />
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-header style="text-align: center;" >
        <el-autocomplete
            debounce="0"
            class="inline-input"
            v-model="value1"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
        ><el-button slot="append" icon="el-icon-search" @click="Paasas"></el-button></el-autocomplete></el-header>
      <el-container>
        <el-aside width="130px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '4']">
            <el-menu-item index="1-1" @click="All">全部</el-menu-item>
            <el-menu-item @click="hotAll" index="1-2">热销榜</el-menu-item>
            <el-divider content-position="left"><span style="font-size: 12px">分类</span></el-divider>
            <el-menu-item  @click="bytype(value[0])" index="2-2">玄幻类</el-menu-item>
            <el-menu-item  @click="bytype(value[1])" index="3-1">自然科学类</el-menu-item>
            <el-menu-item  @click="bytype(value[2])" index="3-2">政治类</el-menu-item>
            <el-menu-item  @click="bytype(value[3])" index="4-1">医学类</el-menu-item>
            <el-menu-item  @click="bytype(value[4])" index="4-2">计算机类</el-menu-item>
            <el-menu-item  @click="bytype(value[5])" index="4-3">科幻类</el-menu-item>
            <el-menu-item index="4-4">其他</el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <div style="overflow:hidden;overflow-y: scroll;height: 520px">
            <div>
          <span style="width: 100px;display:inline-block; float:left; margin-right: 4px;margin-left: 8px" v-for="book in bookList" :key="book">
                     <router-link to="/bookDetail" >
                         <div @click="sendId(book)">
                    <van-image
                        style="display: block"
                        width="110"
                        height="100"
                        :src=book.bookImg
                    />
                    <span style="display:block;font-weight: bold;font-size: 13px">{{book.bookName}}</span>
                           <div style=" width: 100px; height: 24px">
                      <sapn style="vertical-align:middle;line-height:2rem; width: 100px;display:block;color: red;font-size: 15px">
                        ￥{{book.bookPrice}}<i style="text-align:center;line-height:2rem; float: right; font-size: 9px">Hot<u>{{book.sellnum}}</u></i></sapn>

                             </div>
                             </div>
                         </router-link>
                  <router-link to="/yonghuDetail">
                    <div @click="yonghuDetail(book.userId)">
                        <van-image
                            round
                            width="20"
                            height="20"
                            :src=book.userImg
                        />
                    <span style="color: blue">{{book.userName}}</span>
                        <div style="height:20px">
                        </div>
                    </div>
                    </router-link>
                </span>
            </div>
          </div>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "hot",
  data() {
    return {
      bookList :[],
      value:[
        "玄幻类",
        "自然科学类",
        "政治类",
        "医学类",
        "计算机类",
        "科幻类"
      ],
      type :"",
      value1:"",
      booktype:"",
    }
  },
  methods:{
    //用户详情传userid
    //用户详情页/传用户的id
    yonghuDetail(uId){
      sessionStorage.setItem("userId",JSON.stringify(uId));
    },
    sendUser(val){
      sessionStorage.setItem("userId",JSON.stringify(val));
    },
    sendId(obj) {
      //向详情页发送该商品的所有信息
      sessionStorage.setItem("book",JSON.stringify(obj));
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.$router.replace('/Login')
    },
    querySearch(queryString, cb) {
      if (queryString===''){
        this.value1=null
      }
      // 调用 callback 返回建议列表的数据
      this.axios.get('/book/searchAll/',{params:{
          Name:this.value1,
          type:this.type,
        }}
      ).then(Response => {
        this.bookList = Response.data.data.bookList;
        let arr = [];
        for (let i=0;i<this.bookList.length;i++) {
          arr.push(this.bookList[i].bookName);
        }
        let set = new Set(arr);
        let newArr = Array.from(set);
        let arr1=[];
        for (let i=0;i<newArr.length;i++){
          let obj = {};
          obj.value = newArr[i];
          arr1.push(obj);
        }
        this.BookList = arr1;
        cb(this.BookList);
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSelect(item) {
      console.log(item);
    },
    Paasas(){
      if (this.value1===''){
        this.value1=null
      }
      this.axios.get('/book/searchAll/',{params:{
          Name:this.value1,
          type:this.type,
        }}
      ).then((response) => {
        console.log(response);
        this.bookList = response.data.data.bookList;
      })
          .catch((error) => {
            console.log(error);
          });
    },
    bytype(val){
      this.type=val
      this.booktype=this.type
      this.axios.get('/book/bytype',{params:{
          type:this.type,
        }})
          .then((response) => {
            this.bookList = response.data.data.bookList;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    All(){
      this.type='0'
      this.axios.get('/book/All').then(
          Response => {
            console.log(Response)
            this.bookList = Response.data.data.bookList;
          },
          () => {
          }
      )
    },
    hotAll(){
      this.type='1'
      this.axios.get('/book/hotAll').then(
          Response => {
            console.log(Response)
            this.bookList = Response.data.data.bookList;
          },
          () => {
          }
      )
    },
  },
  created() {
    this.axios.get('/book/All').then(
        Response => {
          console.log(Response)
          this.bookList = Response.data.data.bookList;
        },
        () => {
        }
    )
  },
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-menu-item is-active{
  width: 130px;
}
</style>
